<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>七夕鼠标滑动心形动画</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>豆豆，七夕快乐!!!</h1>

        <svg
            id="svg"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            width="1000"
            height="1000">
            <!-- 动画路径 -->
            <path
                id="heartPath"
                d="M 510.8135 911.9684 c -3.95 0 -7.8549 -1.01 -11.4354 -2.9389 c -4.4104 -2.4815 -109.3945 -61.2326 -215.9841 -157.4643 c -63.0664 -56.9122 -113.412 -115.1117 -149.723 -173.081 c -46.278 -73.9083 -69.7045 -147.6549 -69.7045 -219.1983 c 0 -136.1724 110.7708 -246.9422 246.9412 -246.9422 c 46.0969 0 95.0641 17.2714 137.8731 48.6449 c 25.0096 18.3274 46.324 40.4441 62.0328 63.9178 c 15.7129 -23.4736 37.0253 -45.5903 62.0144 -63.9178 c 42.808 -31.3735 91.7752 -48.6449 137.8915 -48.6449 c 136.1519 0 246.9432 110.7698 246.9432 246.9422 c 0 71.5434 -23.4716 145.29 -69.7271 219.1983 c -36.2414 57.9682 -86.6311 116.1678 -149.6544 173.081 c -106.5681 96.2317 -211.5747 154.9828 -215.9831 157.4643 c -3.5816 1.9289 -7.4845 2.9389 -11.4365 2.9389 L 510.8135 911.9684 z z"
                stroke="#d4237a"
                fill="none"
                stroke-width="2"></path>

            <!-- 动画元素 -->
            <circle id="heart" r="20" fill="none" />

            <!-- svg 路径动画 -->
            <animateMotion
                id="motionAnimation"
                href="#heart"
                fill="freeze"
                dur="10s"
                rotate="auto"
                repeatCount="indefinite"
                begin="startAnimationEvent">
                <mpath href="#heartPath"></mpath>
            </animateMotion>
        </svg>

        <script src="main.js"></script>
    </body>
</html>
